<template>
  <div>
      <topnav title="我的推荐码"></topnav>
      <div class="content">
          <div class="space"></div>
          <div class="share">
              <img src="../../assets/user/erweima.png" alt="">
              <p>推荐码<span>{{code}}</span></p>
              <h1>扫描二维码进行下载</h1>
              <span>WIN币让你成为人生赢家</span>
          </div>
          <div class="footer">
              <li>
                  <img src="../../assets/user/dowon.png" alt="">
                  <p>保存到相册</p>
              </li>
              <li>
                  <img src="../../assets/user/share.png" alt="">
                  <p>分享给好友</p>
              </li>
          </div>
      </div>
  </div>
</template>

<script>
import topnav from "../../components/topNav"
import { Dialog } from 'vant' 
import api from '../../axios/api'
export default {
    data(){
        return{
        id:null,
        code:"",
        }
    },
     mounted(){
        this.phone = localStorage.getItem("phone")
        this.id = localStorage.getItem("id");
        this.getcode()
    },
    methods:{
        getcode(){
           let data = {
                id:this.id,
           }
           this.$post(api.getcode,data).then(res=>{
        if(res.code == 0){
           this.code = res.data.code
        }else{
            this.$toast(res.error)
        }
    })   
        }  
    },
    components:{
        topnav
    }
}
</script>

<style lang="less" scoped>
.space{
    height: 1px;
    background-color: #ff6a10;
}
.content{
    width: 100%;
    height: 667px;
    background: url("../../assets/user/recom_bg.png") no-repeat;
    background-size: 100%;
    .share {
        width: 75%;
        margin: 0 auto;
        height: 350px;
        margin-top: 140px;
        background-color: #fff;
        border-radius: 10px;
        text-align: center;
        img{
            width: 180px;
            height: 180px;
            margin-top: 30px;
        }
        p{
            font-size: 17px;
            color: #000;
            font-weight: 600;
            margin-top: 10px;
            span{
                font-size: 17px;
                color: #ff6a10;
                margin-left: 5px;
            }
        }
        h1{
            font-size: 13px;
            margin-top: 20px;
        }
        span{
            color: #ff6a10;
            font-size: 14px;
        }
    }
}
.footer{
    margin-top: 50px;
    display: flex;
    li{
        text-align: center;
        width: 50%;
        display: flex;
        flex-wrap: wrap;
        img{
            width: 30px;
            height: 30px;
            margin: 0 auto;
        }
        p{
            width: 100%;
            color: #fff;
            margin-top: 5px;
        }
    }
}
</style>